<%@ tag import="com.biz.primus.base.tags.CheckType" %>
<%@ tag import="com.biz.primus.base.tags.Layout" %>
<%@ tag import="java.util.Collection" %>
<%@ tag pageEncoding="UTF-8" %>
<%@taglib prefix="b" tagdir="/WEB-INF/tags/base" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%--标题--%>
<%@ attribute name="_title" required="true" type="java.lang.String" %>
<%--表单name--%>
<%@ attribute name="_name" required="true" type="java.lang.String" %>
<%--是否显示上传按钮--%>
<%@ attribute name="_showBtn" required="false" type="java.lang.Boolean" %>
<%--file accept--%>
<%@ attribute name="_accept" required="false" type="java.lang.String" %>

<%--表单id--%>
<%@ attribute name="_id" required="false" type="java.lang.String" %>
<%@ attribute name="_fileId" required="true" type="java.lang.String" %>

<%--是否必填项--%>
<%@ attribute name="_required" required="false" type="java.lang.Boolean" %>
<%--布局,可选single,twin,three三个值,对应单列,双列,三列--%>
<%@ attribute name="_layout" required="false" type="com.biz.primus.base.tags.Layout" %>
<c:set var="_layout" value="<%=_layout==null?Layout.single:_layout%>"/>
<%--文本框验证类型,可选值见枚举类--%>
<%@ attribute name="_type" required="false" type="com.biz.primus.base.tags.CheckType" %>
<c:set var="type" value="<%=_type==null?CheckType.text:_type%>"/>
<%--输入框列宽--%>
<%@ attribute name="_inputCol" required="false" type="java.lang.Integer" %>
<c:set var="_inputCol" value="${empty _inputCol? _layout.inputCol:_inputCol}"/>
<%--标题列宽--%>
<%@ attribute name="_titleCol" required="false" type="java.lang.Integer" %>
<c:set var="_titleCol" value="${empty _titleCol? _layout.titleCol:_titleCol}"/>

<%@ attribute name="_value" required="false" type="java.lang.Object" %>


<b:row layout="${_layout}">
    <b:label title="${_title}" forId="${empty _id?_name:_id}" titleCol="${_titleCol}"/>
    <div class="col-sm-${_inputCol}">
        <c:if test="${empty _showBtn or _showBtn}">
            <div class="div-btn-upload">
                <button type="button" class="btn-primary btn">上传</button>
            </div>
            <br/>
        </c:if>
        <div class="img-container">
            <c:choose>
                <c:when test="<%= _value instanceof Collection%>">
                    <c:forEach var="i" items="${_value}">
                        <div class="col-sm-4">
                            <div class="col-md-9">
                                <img src="${i}" style="width: 100%" class="item-img"/>
                            </div>
                            <div class="col-md-3">
                                <a href="javascript:void(0)" onclick="previewElse(this)">预览</a>
                            </div>
                        </div>
                    </c:forEach>
                </c:when>
                <c:when test="<%= _value instanceof String%>">
                    <div class="col-sm-4">
                        <div class="col-md-9">
                            <img src="${i}" class="item-img"/>
                        </div>
                        <div class="col-md-3">
                            <a href="javascript:void(0)" onclick="previewElse(this)">预览</a>
                        </div>
                    </div>
                </c:when>
            </c:choose>
        </div>
        <input type="file" id="${_fileId}" name="file" accept="${_accept}" class="file hidden"/>
        <c:choose>
            <c:when test="<%= _value instanceof Collection%>">
                <input type="hidden" name="${_name}" id="${_id}" class="hidden-image" value="${_value.toString()}"/>
            </c:when>
            <c:otherwise>
                <input type="hidden" name="${_name}" id="${_id}" class="hidden-image" value="${_value}"/>
            </c:otherwise>
        </c:choose>
    </div>
</b:row>
<script>
    $(function () {
        AjaxFile.upload("#${_fileId}", function (e, data) {
             var imgUrl = data.result.url;
             var dataFile = data.result.file;
             var $tog = $(this).siblings(".img-container").find(".tog-on");
             if ($tog.length > 0) {
                 $tog.prop("src", imgUrl);
             } else {
                 var html = ''
                     + '<div class="col-sm-4">'
                     + '<div class="col-md-9">'
                     + '<img src="' + imgUrl + '" style="width: 100%;" class="item-img" data-file="' + dataFile + '"/>'
                     + '</div>'
                     + '<div class="col-md-3">'
                     + '<a href="javascript:void(0)" onclick="previewElse(this)">预览</a>'
                     + '</div>'
                     + '</div>';
                 $(this).siblings(".img-container").append(html);
             }
             $(this).siblings(".img-container").find(".item-img").each(function () {
                 $(this).removeClass("tog-on");
             });
            syncImage($(this).siblings(".img-container"));

        })
     })
</script>